<template>
    <div class=" bg-white p-[20px]">
        <div class="flex justify-between items-center mb-[30px]">
            <span class="text-[16px]">登录日志</span>
        </div>

        <a-table :columns="columns" :data-source="searchTable.data" :pagination="pagination"
            :loading="searchTable.loading" @change="handleTableChange">
            <template #bodyCell="{ column, text, record }">
                <template v-if="column.dataIndex === 'user'">
                    {{ record.user.username }}
                    <span class="ml-[5px]" v-if="record.user.real_name">{{ record.user.real_name }}</span>
                </template>
                <template v-if="column.dataIndex === 'action'">
                    <a-button type="link" @click="showModal(record)">详情</a-button>
                </template>
            </template>
        </a-table>

        <a-modal v-model:open="open" title="详情" @ok="handleOk">
            <p>
                <span>操作账号：{{ modelData.username }}</span>
                <span class="ml-[5px]" v-if="modelData.real_name">{{ modelData.real_name }}</span>
            </p>
            <p>操作IP：{{ modelData.ip }}</p>
            <p>请求HOST：{{ modelData.host }}</p>
            <p>请求地址：{{ modelData.url }}</p>
            <p>请求方式：{{ modelData.method }}</p>
            <p>请求内容：</p>
            <div class="h-[200px] overflow-y-auto">
                <pre>{{ modelData.params }}</pre>
            </div>
            <a-divider />
        </a-modal>
    </div>
</template>
<script lang="ts" setup>
import { ref, reactive, computed, onMounted } from 'vue';
import { getAdminActionLog } from '@/utils/api/sys';


const searchTable = reactive({
    current_page: 1,
    last_page: 0,
    per_page: 10,
    total: 0,
    loading: false,
    data: [],
    searchParam: {}
})

// 列表分页数据
const pagination = computed(() => ({
    total: searchTable.total,
    current: searchTable.current_page,
    pageSize: searchTable.per_page,
}));

const columns = [
    {
        title: '管理员',
        dataIndex: 'user',
        key: 'user',
    },
    {
        title: '操作IP',
        dataIndex: 'ip',
        key: 'ip',
    },
    {
        title: 'URL',
        dataIndex: 'url',
        key: 'url',
        responsive: ['lg'],
    },
    {
        title: '请求方式',
        dataIndex: 'method',
        key: 'method',
        responsive: ['lg'],
    },
    {
        title: '操作时间',
        dataIndex: 'created_at',
        key: 'created_at',
        sorter: true,
        width: '15%',
        responsive: ['lg'],
    },
    {
        title: '操作',
        dataIndex: 'action',
        key: 'action',
    },
];

const handleTableChange = (pag: { pageSize: number; current: number }) => {
    searchTable.current_page = pag.current;
    searchTable.per_page = pag.pageSize;
    onSearch();
};

onMounted(() => {
    onSearch();
});

// 初始化数据
const onSearch = () => {
    getAdminActionLog({
        page: searchTable.current_page,
        per_page: searchTable.per_page
    }).then((res: any) => {
        searchTable.current_page = res.data.current_page;
        searchTable.last_page = res.data.last_page;
        searchTable.per_page = res.data.per_page;
        searchTable.total = res.data.total;
        searchTable.data = res.data.data;
    }).catch(() => {
        searchTable.loading = false;
    })
};


const open = ref<boolean>(false);

const modelData = reactive({
    username:'',
    real_name:'',
    url:'',
    ip:'',
    host:'',
    method:'',
    params:'',
    created_at:'',
});

const showModal = (record:any) => {
    modelData.username = record.user.username;
    modelData.real_name = record.user.real_name;
    modelData.url = record.url;
    modelData.ip = record.ip;
    modelData.host = record.host;
    modelData.method = record.method;
    modelData.params = record.params;
    modelData.created_at = record.created_at;
    open.value = true;
};

const handleOk = (e: MouseEvent) => {
    console.log(e);
    open.value = false;
};
</script>